<!DOCTYPE html>
<html>
  <head>
    <title>Chartkick.js</title>
    <meta charset="utf-8">

    <script src="../dist/chartkick.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.js"></script>
    <!-- <script src="https://www.gstatic.com/charts/loader.js"></script> -->
    <!-- <script src="https://code.highcharts.com/highcharts.js"></script> -->

    <script>
      // Chartkick.configure({language: "de"});
      // Chartkick.configure({mapsApiKey: "test123"})
      // Chartkick.setDefaultOptions({colors: ["#b00", "#666"]});
      // Chartkick.options = {colors: ["#b00", "#666"]};
      // Chartkick.options = {legend: "right"};
      // Chartkick.options = {title: "Bingo"};
      // Chartkick.options = {code: true};

      // var CustomAdapter = {
      //   name: "custom",
      //   // renderLineChart: function (chart) {
      //   //   chart.getElement().innerHTML = "Hi";
      //   // },
      //   renderCustomChart: function (chart) {
      //     chart.getElement().innerHTML = "Custom Chart";
      //   }
      // };

      Chartkick.CustomChart = function (element, dataSource, options) {
        // Chartkick.createChart("CustomChart", this, element, dataSource, options);
      };

      // Chartkick.adapters.push(CustomAdapter);
    </script>

    <style>
      body {
        padding: 20px;
        margin: 0;
        font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
      }

      h1 {
        text-align: center;
      }

      .container {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
      }

      .chart {
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="container">

      <h1>Line Chart</h1>
      <div id="line" class="chart"></div>
      <script>
        new Chartkick.LineChart("line", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}, {download: true});
      </script>

      <h1>Pie Chart</h1>
      <div id="pie" class="chart"></div>
      <script>
        new Chartkick.PieChart("pie", [["Blueberry",44],["Strawberry",23],["Banana",22],["Apple",21],["Grape",13]], {download: "pie"});
      </script>

      <h1>Donut Chart</h1>
      <div id="donut" class="chart"></div>
      <script>
        new Chartkick.PieChart("donut", [["Blueberry",44],["Strawberry",23],["Banana",22],["Apple",21],["Grape",13]], {donut: true, download: {background: "#fff"}});
      </script>

      <h1>Column Chart</h1>
      <div id="column" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("column", [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]);
      </script>

      <h1>Bar Chart</h1>
      <div id="bar" class="chart"></div>
      <script>
        new Chartkick.BarChart("bar", [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]);
      </script>

      <h1>Area Chart</h1>
      <div id="area" class="chart"></div>
      <script>
        new Chartkick.AreaChart("area", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8});
      </script>

      <h1>Scatter Chart</h1>
      <div id="scatter" class="chart"></div>
      <script>
        new Chartkick.ScatterChart("scatter", [[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9]]);
      </script>

      <h1>Bubble Chart</h1>
      <div id="bubble" class="chart"></div>
      <script>
        new Chartkick.BubbleChart("bubble", [[174.0, 80.0, 1], [176.5, 82.3, 2], [180.3, 73.6, 3], [167.6, 74.1, 6], [188.0, 85.9, 2]]);
      </script>

      <h1>Bubble Chart - Large Values</h1>
      <div id="bubble-large" class="chart"></div>
      <script>
        new Chartkick.BubbleChart("bubble-large", [[174.0, 80.0, 100], [176.5, 82.3, 200], [180.3, 73.6, 300], [167.6, 74.1, 600], [188.0, 85.9, 150]]);
      </script>

      <h1>Timeline</h1>
      <div id="timeline" class="chart"></div>
      <script>
        new Chartkick.Timeline("timeline", [["Washington", "1789-04-29", "1797-03-03"],["Adams", "1797-03-03", "1801-03-03"],["Jefferson", "1801-03-03", "1809-03-03"]]);
      </script>

      <h1>URL</h1>
      <div id="url" class="chart"></div>
      <script>
        new Chartkick.LineChart("url", "remote.json");
      </script>

      <h1>URL Error</h1>
      <div id="url-error" class="chart"></div>
      <script>
        new Chartkick.LineChart("url-error", "404.json");
      </script>

      <h1>Callback Success</h1>
      <div id="callback-success" class="chart"></div>
      <script>
        new Chartkick.LineChart("callback-success", function (success, error) {
          success({"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8});
        });
      </script>

      <h1>Callback Fetch</h1>
      <div id="callback-fetch" class="chart"></div>
      <script>
        function fetchChart(success, fail) {
          fetch("remote.json").then(function (response) {
            if (!response.ok) {
              throw Error(response.statusText);
            }
            return response.json();
          }).then(success).catch(fail);
        }

        new Chartkick.LineChart("callback-fetch", fetchChart);
      </script>

      <h1>Callback Error</h1>
      <div id="callback-error" class="chart"></div>
      <script>
        new Chartkick.LineChart("callback-error", function (success, error) {
          error("Test error");
        });
      </script>

      <h1>Callback Error 2</h1>
      <div id="callback-error2" class="chart"></div>
      <script>
        new Chartkick.LineChart("callback-error2", function (success, error) {
          throw "Test error";
        });
      </script>

      <h1>Multiple Series Line</h1>
      <div id="multiple-line" class="chart"></div>
      <script>
        new Chartkick.LineChart("multiple-line", [{"name":"Workout","data":{"2021-02-10":3,"2021-02-17":3,"2021-02-24":3,"2021-03-03":1,"2021-03-10":4,"2021-03-17":3,"2021-03-24":2,"2021-03-31":3}},{"name":"Go to concert","data":{"2021-02-10":0,"2021-02-17":0,"2021-02-24":0,"2021-03-03":0,"2021-03-10":2,"2021-03-17":1,"2021-03-24":0,"2021-03-31":0}},{"name":"Wash face","data":{"2021-02-10":0,"2021-02-17":1,"2021-02-24":0,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":0,"2021-03-31":1}},{"name":"Call parents","data":{"2021-02-10":5,"2021-02-17":3,"2021-02-24":2,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":1,"2021-03-31":0}},{"name":"Eat breakfast","data":{"2021-02-10":3,"2021-02-17":2,"2021-02-24":1,"2021-03-03":0,"2021-03-10":2,"2021-03-17":2,"2021-03-24":3,"2021-03-31":0}}]);
      </script>

      <h1>Multiple Series Bar</h1>
      <div id="multiple-bar" class="chart"></div>
      <script>
        new Chartkick.BarChart("multiple-bar", [{name: "Series A", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]}, {name: "Series B", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]}]);
      </script>

      <h1>Multiple Series Bar Stacked</h1>
      <div id="multiple-bar-stacked" class="chart"></div>
      <script>
        new Chartkick.BarChart("multiple-bar-stacked", [{name: "Series A", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]}, {name: "Series B", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]}], {stacked: true});
      </script>

      <h1>Multiple Series Area Unstacked</h1>
      <div id="multiple-area-unstacked" class="chart"></div>
      <script>
        new Chartkick.AreaChart("multiple-area-unstacked", [{"name":"Workout","data":{"2021-02-10":3,"2021-02-17":3,"2021-02-24":3,"2021-03-03":1,"2021-03-10":4,"2021-03-17":3,"2021-03-24":2,"2021-03-31":3}},{"name":"Go to concert","data":{"2021-02-10":0,"2021-02-17":0,"2021-02-24":0,"2021-03-03":0,"2021-03-10":2,"2021-03-17":1,"2021-03-24":0,"2021-03-31":0}},{"name":"Wash face","data":{"2021-02-10":0,"2021-02-17":1,"2021-02-24":0,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":0,"2021-03-31":1}},{"name":"Call parents","data":{"2021-02-10":5,"2021-02-17":3,"2021-02-24":2,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":1,"2021-03-31":0}},{"name":"Eat breakfast","data":{"2021-02-10":3,"2021-02-17":2,"2021-02-24":1,"2021-03-03":0,"2021-03-10":2,"2021-03-17":2,"2021-03-24":3,"2021-03-31":0}}], {stacked: false});
      </script>

      <h1>Multiple Series Bar Stacked and Grouped - Chart.js 2.5+ and Highcharts</h1>
      <div id="multiple-bar-stacked-grouped" class="chart"></div>
      <script>
        new Chartkick.BarChart("multiple-bar-stacked-grouped", [{name: "Series A", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]], stack: "stack 1"}, {name: "Series B", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]], stack: "stack 2"}, {name: "Series C", data: [["0",12],["1",16],["2",18],["3",11],["4",10],["5",3],["6",17]], stack: "stack 2"}], {max: 80, stacked: true});
      </script>

      <h1>Multiple Series Bar Stacked Percent - Google Charts and Highcharts</h1>
      <div id="multiple-bar-stacked-percent" class="chart"></div>
      <script>
        new Chartkick.BarChart("multiple-bar-stacked-percent", [{name: "Series A", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]}, {name: "Series B", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]}], {stacked: "percent"});
      </script>

      <h1>Multiple Series Bar Stacked Relative - Google Charts</h1>
      <div id="multiple-bar-stacked-relative" class="chart"></div>
      <script>
        new Chartkick.BarChart("multiple-bar-stacked-relative", [{name: "Series A", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]}, {name: "Series B", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]}], {stacked: "relative"});
      </script>

      <h1>Multiple Series Column Stacked</h1>
      <div id="multiple-column-stack" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("multiple-column-stack", [{name: "Series A", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]}, {name: "Series B", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]}], {max: 80, stacked: true});
      </script>

      <h1>Multiple Series Area</h1>
      <div id="multiple-area" class="chart"></div>
      <script>
        new Chartkick.AreaChart("multiple-area", [{"name":"Workout","data":{"2021-02-10":3,"2021-02-17":3,"2021-02-24":3,"2021-03-03":1,"2021-03-10":4,"2021-03-17":3,"2021-03-24":2,"2021-03-31":3}},{"name":"Go to concert","data":{"2021-02-10":0,"2021-02-17":0,"2021-02-24":0,"2021-03-03":0,"2021-03-10":2,"2021-03-17":1,"2021-03-24":0,"2021-03-31":0}},{"name":"Wash face","data":{"2021-02-10":0,"2021-02-17":1,"2021-02-24":0,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":0,"2021-03-31":1}},{"name":"Call parents","data":{"2021-02-10":5,"2021-02-17":3,"2021-02-24":2,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":1,"2021-03-31":0}},{"name":"Eat breakfast","data":{"2021-02-10":3,"2021-02-17":2,"2021-02-24":1,"2021-03-03":0,"2021-03-10":2,"2021-03-17":2,"2021-03-24":3,"2021-03-31":0}}]);
      </script>

      <h1>Multiple Series Scatter</h1>
      <div id="multiple-scatter" class="chart"></div>
      <script>
        var scatterData = [{
          name: "Female",
          data: [[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9]]
          }, {
            name: "Male",
            data: [[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9]]
        }];
        new Chartkick.ScatterChart("multiple-scatter", scatterData);
      </script>

      <h1>Remote</h1>
      <div id="remote" class="chart"></div>
      <script>
        new Chartkick.LineChart("remote", "remote.json");
      </script>

      <h1>One Series</h1>
      <div id="one-series" class="chart"></div>
      <script>
        new Chartkick.LineChart("one-series", [{name: "Series A", data: {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}}]);
      </script>

      <h1>Library Option</h1>
      <div id="library" class="chart"></div>
      <script>
        new Chartkick.LineChart("library", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}, {"library": {"backgroundColor": "#eee", "chart": {"zoomType": "x"}, "legend": {"position": "top"}, "hAxis": {"title": "Time"}, "vAxis": {"title": "Count"}}});
      </script>

      <h1>Line Chart - Dataset</h1>
      <div id="line-dataset" class="chart"></div>
      <script>
        new Chartkick.LineChart("line-dataset", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}, {dataset: {borderDash: [10]}});
      </script>

      <h1>Pie Chart - Dataset</h1>
      <div id="pie-dataset" class="chart"></div>
      <script>
        new Chartkick.PieChart("pie-dataset", [["Blueberry",44],["Strawberry",23],["Banana",22],["Apple",21],["Grape",13]], {dataset: {borderWidth: 10}});
      </script>

      <h1>Scatter Chart - Dataset</h1>
      <div id="scatter-dataset" class="chart"></div>
      <script>
        new Chartkick.ScatterChart("scatter-dataset", [[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9]], {dataset: {showLine: true}});
      </script>

      <h1>Multiple Series - Dataset</h1>
      <div id="multiple-line-dataset" class="chart"></div>
      <script>
        new Chartkick.LineChart("multiple-line-dataset", [{"name":"Workout","data":{"2021-02-10":3,"2021-02-17":3,"2021-02-24":3,"2021-03-03":1,"2021-03-10":4,"2021-03-17":3,"2021-03-24":2,"2021-03-31":3}},{"name":"Go to concert","data":{"2021-02-10":0,"2021-02-17":0,"2021-02-24":0,"2021-03-03":0,"2021-03-10":2,"2021-03-17":1,"2021-03-24":0,"2021-03-31":0}},{"name":"Wash face","data":{"2021-02-10":0,"2021-02-17":1,"2021-02-24":0,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":0,"2021-03-31":1}},{"name":"Call parents","data":{"2021-02-10":5,"2021-02-17":3,"2021-02-24":2,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":1,"2021-03-31":0}},{"name":"Eat breakfast","data":{"2021-02-10":3,"2021-02-17":2,"2021-02-24":1,"2021-03-03":0,"2021-03-10":2,"2021-03-17":2,"2021-03-24":3,"2021-03-31":0}, dataset: {borderDash: [10]}}]);
      </script>

      <h1>Geo Chart</h1>
      <div id="geo" class="chart"></div>
      <script>
        new Chartkick.GeoChart("geo", [["United States",44],["Germany",23],["Brazil",22],["Canada",21],["France",13]]);
      </script>

      <h1>Markers</h1>
      <div id="markers" class="chart"></div>
      <script>
        new Chartkick.GeoChart("markers", [["Rome",44],["Milan",23],["Naples",22],["Turin",21]], {library: {region: "IT", displayMode: "markers", colorAxis: {colors: ["#e37b33", "#e37b33"]}}});
      </script>

      <h1>Discrete Line Chart</h1>
      <div id="discrete-line" class="chart"></div>
      <script>
        new Chartkick.LineChart("discrete-line", [["United States",44],["Germany",23],["Brazil",22],["Canada",21],["France",13]]);
      </script>

      <h1>Discrete Line Chart Numeric String</h1>
      <div id="numeric-string" class="chart"></div>
      <script>
        new Chartkick.LineChart("numeric-string", [["26",4],["25",8],["24",0],["23",2],["22",2],["21",1],["20",3],["19",5],["18",8],["17",1],["16",3],["15",1],["14",2],["13",5],["12",7],["11",9],["10",1],["9",6],["8",4],["7",0],["6",3],["5",9],["4",8],["3",0],["2",5],["1",2]], {});
      </script>

      <h1>Discrete Area Chart</h1>
      <div id="discrete-area" class="chart"></div>
      <script>
        new Chartkick.AreaChart("discrete-area", [["United States",44],["Germany",23],["Brazil",22],["Canada",21],["France",13]]);
      </script>

      <h1>Discrete Multiple Series</h1>
      <div id="multiple-discrete" class="chart"></div>
      <script>
        new Chartkick.LineChart("multiple-discrete", [{name: "Series A", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]}, {name: "Series B", data: [["0",22],["1",36],["2",38],["3",31],["4",30],["5",3],["6",17]]}]);
      </script>

      <h1>Different Data</h1>
      <div id="different" class="chart"></div>
      <script>
        new Chartkick.LineChart("different", [{name: "Series A", data: [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]]}, {name: "Series B", data: [["7",22],["1",36],["2",38],["3",31],["4",30],["5",3],["6",17]]}]);
      </script>

      <h1>Min</h1>
      <div id="min" class="chart"></div>
      <script>
        new Chartkick.LineChart("min", {"2021-02-10":200,"2021-02-11":206,"2021-02-12":203,"2021-02-13":202,"2021-02-14":205,"2021-02-15":203}, {"min": -100});
      </script>

      <h1>Max</h1>
      <div id="max" class="chart"></div>
      <script>
        new Chartkick.LineChart("max", {"2021-02-10":200,"2021-02-11":206,"2021-02-12":203,"2021-02-13":202,"2021-02-14":205,"2021-02-15":203}, {"max": 400});
      </script>

      <h1>Min Null</h1>
      <div id="min-null" class="chart"></div>
      <script>
        new Chartkick.LineChart("min-null", {"2021-02-10":200,"2021-02-11":206,"2021-02-12":203,"2021-02-13":202,"2021-02-14":205,"2021-02-15":203}, {"min": null});
      </script>

      <h1>X-Axis Min and Max - Chart.js</h1>
      <div id="xmin" class="chart"></div>
      <script>
        new Chartkick.LineChart("xmin", {"2021-02-10":200,"2021-02-11":206,"2021-02-12":203,"2021-02-13":202,"2021-02-14":205,"2021-02-15":203}, {"xmin": "2021-02-01", "xmax": "2021-02-28"});
      </script>

      <h1>X-Axis Min and Max Empty - Chart.js</h1>
      <div id="xmin-empty" class="chart"></div>
      <script>
        new Chartkick.LineChart("xmin-empty", {}, {"xmin": "2021-02-01", "xmax": "2021-02-28"});
      </script>

      <h1>X-Axis Min and Max Scatter - Chart.js</h1>
      <div id="xmin-scatter" class="chart"></div>
      <script>
        new Chartkick.ScatterChart("xmin-scatter", [[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9]], {xmin: 0, xmax: 400})
      </script>

      <h1>X-Axis Min and Max Scatter Empty - Chart.js</h1>
      <div id="xmin-scatter-empty" class="chart"></div>
      <script>
        new Chartkick.ScatterChart("xmin-scatter-empty", [], {xmin: 0, xmax: 400})
      </script>

      <h1>Axis Titles Line</h1>
      <div id="axis-titles" class="chart"></div>
      <script>
        new Chartkick.LineChart("axis-titles", {"2021-02-10":200,"2021-02-11":206,"2021-02-12":203,"2021-02-13":202,"2021-02-14":205,"2021-02-15":203}, {"xtitle": "Horizontal", "ytitle": "Vertical"});
      </script>

      <h1>Axis Titles Bar</h1>
      <div id="axis-titles-bar" class="chart"></div>
      <script>
        new Chartkick.BarChart("axis-titles-bar", {"2021-02-10":200,"2021-02-11":206,"2021-02-12":203,"2021-02-13":202,"2021-02-14":205,"2021-02-15":203}, {"xtitle": "Horizontal", "ytitle": "Vertical"});
      </script>

      <h1>Colors</h1>
      <div id="colors" class="chart"></div>
      <script>
        new Chartkick.LineChart("colors", [{"name":"Workout","data":{"2021-02-10":3,"2021-02-17":3,"2021-02-24":3,"2021-03-03":1,"2021-03-10":4,"2021-03-17":3,"2021-03-24":2,"2021-03-31":3}},{"name":"Go to concert","data":{"2021-02-10":0,"2021-02-17":0,"2021-02-24":0,"2021-03-03":0,"2021-03-10":2,"2021-03-17":1,"2021-03-24":0,"2021-03-31":0}},{"name":"Wash face","data":{"2021-02-10":0,"2021-02-17":1,"2021-02-24":0,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":0,"2021-03-31":1}},{"name":"Call parents","data":{"2021-02-10":5,"2021-02-17":3,"2021-02-24":2,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":1,"2021-03-31":0}},{"name":"Eat breakfast","data":{"2021-02-10":3,"2021-02-17":2,"2021-02-24":1,"2021-03-03":0,"2021-03-10":2,"2021-03-17":2,"2021-03-24":3,"2021-03-31":0}}], {"colors": ["#b00", "#666"]});
      </script>

      <h1>Pie Colors</h1>
      <div id="pie-colors" class="chart"></div>
      <script>
        new Chartkick.PieChart("pie-colors", [["Blueberry",44],["Strawberry",23],["Banana",22],["Apple",21],["Grape",13]], {"colors": ["#b00", "#666"]});
      </script>

      <h1>Column Colors</h1>
      <div id="column-colors" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("column-colors", [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]], {"colors": ["#b00", "#666"]});
      </script>

      <h1>Column Colors - Array</h1>
      <div id="column-colors-array" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("column-colors-array", [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]], {"colors": [["#b00", "#666"]]});
      </script>

      <h1>Inline Color</h1>
      <div id="inline-color" class="chart"></div>
      <script>
        new Chartkick.LineChart("inline-color", [{"name":"Workout","data":{"2021-02-10":3,"2021-02-17":3,"2021-02-24":3,"2021-03-03":1,"2021-03-10":4,"2021-03-17":3,"2021-03-24":2,"2021-03-31":3}, color: "#b00"},{"name":"Go to concert","data":{"2021-02-10":0,"2021-02-17":0,"2021-02-24":0,"2021-03-03":0,"2021-03-10":2,"2021-03-17":1,"2021-03-24":0,"2021-03-31":0}, color: "#666"},{"name":"Wash face","data":{"2021-02-10":0,"2021-02-17":1,"2021-02-24":0,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":0,"2021-03-31":1}},{"name":"Call parents","data":{"2021-02-10":5,"2021-02-17":3,"2021-02-24":2,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":1,"2021-03-31":0}},{"name":"Eat breakfast","data":{"2021-02-10":3,"2021-02-17":2,"2021-02-24":1,"2021-03-03":0,"2021-03-10":2,"2021-03-17":2,"2021-03-24":3,"2021-03-31":0}}]);
      </script>

      <h1>Multiple Inline Color</h1>
      <div id="multiple-inline-color" class="chart"></div>
      <script>
        var scatterData = [{
          name: "Female",
          data: [[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9]],
          color: "#b00"
          }, {
            name: "Male",
            data: [[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9]],
            color: "#666"
        }];
        new Chartkick.ScatterChart("multiple-inline-color", scatterData);
      </script>

      <h1>Line Label</h1>
      <div id="line-label" class="chart"></div>
      <script>
        new Chartkick.LineChart("line-label", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}, {"label": "Boom"});
      </script>

      <h1>Pie Label</h1>
      <div id="pie-label" class="chart"></div>
      <script>
        new Chartkick.PieChart("pie-label", [["Blueberry",44],["Strawberry",23],["Banana",22],["Apple",21],["Grape",13]], {"label": "Boom"});
      </script>

      <h1>Line Chart - Times</h1>
      <div id="line-times" class="chart"></div>
      <script>
        new Chartkick.LineChart("line-times", {"2021-02-10 00:00:00 -0800":11,"2021-02-11 00:00:00 -0800":6,"2021-02-12 00:00:00 -0800":3,"2021-02-13 00:00:00 -0800":2,"2021-02-14 00:00:00 -0800":5,"2021-02-15 00:00:00 -0800":3,"2021-02-16 00:00:00 -0800":8,"2021-02-17 00:00:00 -0800":6,"2021-02-18 00:00:00 -0800":6,"2021-02-19 00:00:00 -0800":12,"2021-02-20 00:00:00 -0800":5,"2021-02-21 00:00:00 -0800":5,"2021-02-22 00:00:00 -0800":3,"2021-02-23 00:00:00 -0800":1,"2021-02-24 00:00:00 -0800":10,"2021-02-25 00:00:00 -0800":1,"2021-02-26 00:00:00 -0800":3,"2021-02-27 00:00:00 -0800":2,"2021-02-28 00:00:00 -0800":3,"2021-03-01 00:00:00 -0800":2,"2021-03-02 00:00:00 -0800":8});
      </script>

      <h1>Line Chart - Single Time</h1>
      <div id="line-single-time" class="chart"></div>
      <script>
        new Chartkick.LineChart("line-single-time", {"2021-02-10 18:00:00 -0800":11,"2021-02-11 00:00:00 -0800":6,"2021-02-12 00:00:00 -0800":3,"2021-02-13 00:00:00 -0800":2,"2021-02-14 00:00:00 -0800":5,"2021-02-15 00:00:00 -0800":3,"2021-02-16 00:00:00 -0800":8,"2021-02-17 00:00:00 -0800":6,"2021-02-18 00:00:00 -0800":6,"2021-02-19 00:00:00 -0800":12,"2021-02-20 00:00:00 -0800":5,"2021-02-21 00:00:00 -0800":5,"2021-02-22 00:00:00 -0800":3,"2021-02-23 00:00:00 -0800":1,"2021-02-24 00:00:00 -0800":10,"2021-02-25 00:00:00 -0800":1,"2021-02-26 00:00:00 -0800":3,"2021-02-27 00:00:00 -0800":2,"2021-02-28 00:00:00 -0800":3,"2021-03-01 00:00:00 -0800":2,"2021-03-02 00:00:00 -0800":8});
      </script>

      <h1>Line Chart - Week Monday</h1>
      <div id="line-week-monday" class="chart"></div>
      <script>
        new Chartkick.LineChart("line-week-monday", [["1997-09-15",1740],["1997-09-22",4237],["1997-09-29",3461],["1997-10-06",2365],["1997-10-13",2104],["1997-10-20",2368],["1997-10-27",1190],["1997-11-03",3382],["1997-11-10",9095],["1997-11-17",7113],["1997-11-24",4258],["1997-12-01",2418],["1997-12-08",2444],["1997-12-15",3352],["1997-12-22",2171],["1997-12-29",3554],["1998-01-05",4204],["1998-01-12",2600],["1998-01-19",2420],["1998-01-26",3410],["1998-02-02",2039],["1998-02-09",1341],["1998-02-16",3712],["1998-02-23",3397],["1998-03-02",2347],["1998-03-09",1816],["1998-03-16",609],["1998-03-23",4081],["1998-03-30",8191],["1998-04-06",1684],["1998-04-13",2157],["1998-04-20",740]]);
      </script>

      <h1>Smarter Discrete</h1>
      <div id="smarter-discrete" class="chart"></div>
      <script>
        new Chartkick.LineChart("smarter-discrete", [["United States",44],["Germany",23],["Brazil",22],["Canada",21],["France",13]]);
      </script>

      <h1>Column Labels</h1>
      <div id="column-labels" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("column-labels", [{"name":"ratings_count","data":[["Close Shave, A (1995)",112],["Schindler's List (1993)",298],["Wrong Trousers, The (1993)",118],["Casablanca (1942)",243],["Shawshank Redemption, The (1994)",283],["Wallace \u0026 Gromit: The Best of Aardman Animation (1996)",67],["Usual Suspects, The (1995)",267],["Rear Window (1954)",209],["Star Wars (1977)",583],["12 Angry Men (1957)",125],["Third Man, The (1949)",72],["Some Folks Call It a Sling Blade (1993)",41],["One Flew Over the Cuckoo's Nest (1975)",264],["To Kill a Mockingbird (1962)",219],["Citizen Kane (1941)",198],["Silence of the Lambs, The (1991)",390],["North by Northwest (1959)",179],["Godfather, The (1972)",413],["Secrets \u0026 Lies (1996)",162],["Manchurian Candidate, The (1962)",131]]},{"name":"avg_rating","data":[["Close Shave, A (1995)","4.49"],["Schindler's List (1993)","4.47"],["Wrong Trousers, The (1993)","4.47"],["Casablanca (1942)","4.46"],["Shawshank Redemption, The (1994)","4.45"],["Wallace \u0026 Gromit: The Best of Aardman Animation (1996)","4.45"],["Usual Suspects, The (1995)","4.39"],["Rear Window (1954)","4.39"],["Star Wars (1977)","4.36"],["12 Angry Men (1957)","4.34"],["Third Man, The (1949)","4.33"],["Some Folks Call It a Sling Blade (1993)","4.29"],["One Flew Over the Cuckoo's Nest (1975)","4.29"],["To Kill a Mockingbird (1962)","4.29"],["Citizen Kane (1941)","4.29"],["Silence of the Lambs, The (1991)","4.29"],["North by Northwest (1959)","4.28"],["Godfather, The (1972)","4.28"],["Secrets \u0026 Lies (1996)","4.27"],["Manchurian Candidate, The (1962)","4.26"]]}], {});
      </script>

      <h1>Time Labels</h1>
      <div id="time-labels" class="chart"></div>
      <script>
        new Chartkick.LineChart("time-labels", [{"name":"count","data":[["1922-01-01",1],["1926-01-01",1],["1930-01-01",1],["1931-01-01",1],["1932-01-01",1],["1933-01-01",2],["1934-01-01",4],["1935-01-01",4],["1936-01-01",2],["1937-01-01",4],["1938-01-01",3],["1939-01-01",7],["1940-01-01",8],["1941-01-01",5],["1942-01-01",2],["1943-01-01",4],["1944-01-01",5],["1945-01-01",4],["1946-01-01",5],["1947-01-01",5],["1948-01-01",3],["1949-01-01",4],["1950-01-01",7],["1951-01-01",5],["1952-01-01",3],["1953-01-01",2],["1954-01-01",7],["1955-01-01",5],["1956-01-01",4],["1957-01-01",8],["1958-01-01",9],["1959-01-01",4],["1960-01-01",4],["1960-06-28",1],["1961-01-01",3],["1962-01-01",5],["1963-01-01",6],["1964-01-01",2],["1965-01-01",5],["1966-01-01",2],["1967-01-01",5],["1968-01-01",6],["1969-01-01",4],["1970-01-01",3],["1971-01-01",5],["1971-02-04",1],["1971-12-20",1],["1972-01-01",3],["1973-01-01",4],["1974-01-01",8],["1975-01-01",5],["1975-05-17",1],["1976-01-01",4],["1976-03-08",1],["1977-01-01",4],["1978-01-01",4],["1979-01-01",9],["1980-01-01",8],["1981-01-01",11],["1981-03-08",1],["1982-01-01",13],["1983-01-01",5],["1984-01-01",8],["1985-01-01",7],["1986-01-01",14],["1986-04-26",1],["1987-01-01",13],["1988-01-01",10],["1988-03-29",1],["1989-01-01",15],["1990-01-01",24],["1991-01-01",22],["1992-01-01",37],["1993-01-01",126],["1994-01-01",213],["1994-09-16",1],["1995-01-01",214],["1995-08-14",1],["1995-09-25",1],["1995-10-30",1],["1995-12-18",1],["1996-01-01",26],["1996-01-15",1],["1996-01-22",1],["1996-01-29",1],["1996-02-02",4],["1996-02-05",1],["1996-02-09",9],["1996-02-16",9],["1996-02-21",1],["1996-02-23",7],["1996-02-28",1],["1996-03-01",8],["1996-03-08",10],["1996-03-09",1],["1996-03-15",1],["1996-03-22",6],["1996-03-23",1],["1996-03-29",9],["1996-03-30",1],["1996-04-02",1],["1996-04-03",2],["1996-04-05",5],["1996-04-12",9],["1996-04-19",9],["1996-04-23",1],["1996-04-26",8],["1996-04-28",1],["1996-05-01",1],["1996-05-03",4],["1996-05-10",11],["1996-05-17",1],["1996-05-22",1],["1996-05-24",2],["1996-05-31",3],["1996-06-05",1],["1996-06-07",4],["1996-06-14",5],["1996-06-21",3],["1996-06-28",3],["1996-06-29",1],["1996-07-03",2],["1996-07-12",6],["1996-07-13",1],["1996-07-17",1],["1996-07-19",6],["1996-07-22",1],["1996-07-26",7],["1996-07-31",1],["1996-08-02",5],["1996-08-07",2],["1996-08-09",3],["1996-08-16",7],["1996-08-21",1],["1996-08-23",8],["1996-08-30",5],["1996-09-04",1],["1996-09-06",6],["1996-09-13",8],["1996-09-14",1],["1996-09-16",1],["1996-09-18",1],["1996-09-20",5],["1996-09-24",1],["1996-09-25",1],["1996-09-27",7],["1996-09-28",1],["1996-10-04",7],["1996-10-05",1],["1996-10-09",1],["1996-10-11",10],["1996-10-16",1],["1996-10-18",5],["1996-10-19",1],["1996-10-25",9],["1996-10-26",1],["1996-10-30",2],["1996-11-01",7],["1996-11-08",6],["1996-11-13",2],["1996-11-15",5],["1996-11-22",5],["1996-11-27",3],["1996-11-30",1],["1996-12-06",5],["1996-12-13",4],["1996-12-15",1],["1996-12-18",1],["1996-12-20",5],["1996-12-25",6],["1996-12-27",3],["1997-01-01",98],["1997-01-10",7],["1997-01-17",4],["1997-01-24",5],["1997-01-29",1],["1997-01-31",4],["1997-02-07",5],["1997-02-14",8],["1997-02-21",3],["1997-02-28",3],["1997-03-05",1],["1997-03-07",4],["1997-03-14",5],["1997-03-21",4],["1997-03-26",2],["1997-03-28",4],["1997-04-04",5],["1997-04-11",4],["1997-04-18",6],["1997-04-22",2],["1997-04-25",6],["1997-04-30",1],["1997-05-01",1],["1997-05-02",10],["1997-05-09",5],["1997-05-14",1],["1997-05-16",6],["1997-05-23",7],["1997-05-30",5],["1997-06-06",5],["1997-06-13",8],["1997-06-20",9],["1997-06-27",8],["1997-07-04",4],["1997-07-11",4],["1997-08-01",4],["1997-08-08",3],["1997-08-15",1],["1997-08-22",6],["1997-08-29",2],["1997-09-01",1],["1997-09-19",1],["1997-09-26",1],["1997-10-17",1],["1997-12-18",3],["1997-12-23",1],["1997-12-25",3],["1997-12-26",3],["1997-12-31",1],["1998-01-01",11],["1998-01-09",4],["1998-01-16",7],["1998-01-21",1],["1998-01-23",2],["1998-01-30",5],["1998-02-01",2],["1998-02-06",6],["1998-02-11",1],["1998-02-13",3],["1998-02-20",3],["1998-03-06",1],["1998-03-10",4],["1998-03-14",2],["1998-03-17",1],["1998-03-20",5],["1998-03-27",4],["1998-04-03",1],["1998-10-09",1],["1998-10-23",1]],"library":null}], {"min":null});
      </script>

      <h1>Unordered Data</h1>
      <div id="unordered-data" class="chart"></div>
      <script>
        new Chartkick.LineChart("unordered-data", [{"name":"boom","data":[["2021-04-03",392],["2021-04-04",401],["2021-04-05",363],["2021-04-06",333],["2021-04-07",327],["2021-04-08",265],["2021-04-09",326],["2021-04-10",374],["2021-04-11",353],["2021-04-12",287],["2021-04-13",286],["2021-04-14",280],["2021-04-15",262],["2021-04-16",228],["2021-04-17",306],["2021-04-18",49],["2021-04-19",7],["2021-04-20",4],["2021-04-21",3],["2021-04-24",4],["2021-04-25",2],["2021-04-26",1],["2021-04-27",2],["2021-04-28",3],["2021-04-29",1],["2021-04-30",2]],"library":null},{"name":"bam","data":[["2021-04-06",1],["2021-04-11",1],["2021-04-18",390],["2021-04-19",463],["2021-04-20",409],["2021-04-21",334],["2021-04-22",352],["2021-04-23",325],["2021-04-24",435],["2021-04-25",401],["2021-04-26",402],["2021-04-27",405],["2021-04-28",397],["2021-04-29",336],["2021-04-30",349],["2021-05-01",478],["2021-05-02",156]]}], {"min":null});
      </script>

      <h1>Weekly Data</h1>
      <div id="weekly-data" class="chart"></div>
      <script>
        new Chartkick.LineChart("weekly-data", [{"name":"target","data":[["2021-05-02","86.0"],["2021-04-25","86.0"],["2021-04-18","86.0"],["2021-04-11","86.0"],["2021-04-04","86.0"],["2021-03-28","86.0"]],"library":{"pointStyle":"line","hitRadius":10,"borderColor":"#109618","pointBackgroundColor":"#109618","backgroundColor":"#109618"}},{"name":"test","data":[["2021-05-02","86.52"],["2021-04-25","87.26"],["2021-04-18","86.85"],["2021-04-11","86.38"],["2021-04-04","85.65"],["2021-03-28","84.63"]]}], {"min":null});
      </script>

      <h1>Monthly Data</h1>
      <div id="monthly-data" class="chart"></div>
      <script>
        new Chartkick.LineChart("monthly-data", [["2023-01-01",11],["2023-02-01",6],["2023-03-01",3],["2023-04-01",2],["2023-05-01",5],["2023-06-01",3],["2023-07-01",8],["2023-08-01",6],["2023-09-01",6],["2023-10-01",12],["2023-11-01",5],["2023-12-01",5]]);
      </script>

      <h1>Yearly Data</h1>
      <div id="yearly-data" class="chart"></div>
      <script>
        new Chartkick.LineChart("yearly-data", [["2010-01-01",11], ["2011-01-01",6],["2012-01-01",3],["2013-01-01",2],["2014-01-01",5],["2015-01-01",3],["2016-01-01",8],["2017-01-01",6],["2018-01-01",6],["2019-01-01",12],["2020-01-01",5],["2021-01-01",5]]);
      </script>

      <h1>Minute Data</h1>
      <div id="minute-data" class="chart"></div>
      <script>
        new Chartkick.LineChart("minute-data", [["2021-05-23T01:51:00.000Z",0],["2021-05-23T01:52:00.000Z",0],["2021-05-23T01:53:00.000Z",0],["2021-05-23T01:54:00.000Z",0],["2021-05-23T01:55:00.000Z",0],["2021-05-23T01:56:00.000Z",0],["2021-05-23T01:57:00.000Z",0],["2021-05-23T01:58:00.000Z",0],["2021-05-23T01:59:00.000Z",0],["2021-05-23T02:00:00.000Z",0],["2021-05-23T02:01:00.000Z",0],["2021-05-23T02:02:00.000Z",0],["2021-05-23T02:03:00.000Z",0],["2021-05-23T02:04:00.000Z",0],["2021-05-23T02:05:00.000Z",0],["2021-05-23T02:06:00.000Z",0],["2021-05-23T02:07:00.000Z",0],["2021-05-23T02:08:00.000Z",0],["2021-05-23T02:09:00.000Z",0],["2021-05-23T02:10:00.000Z",0],["2021-05-23T02:11:00.000Z",0],["2021-05-23T02:12:00.000Z",0],["2021-05-23T02:13:00.000Z",0],["2021-05-23T02:14:00.000Z",0],["2021-05-23T02:15:00.000Z",0],["2021-05-23T02:16:00.000Z",0],["2021-05-23T02:17:00.000Z",0],["2021-05-23T02:18:00.000Z",0],["2021-05-23T02:19:00.000Z",0],["2021-05-23T02:20:00.000Z",0],["2021-05-23T02:21:00.000Z",0],["2021-05-23T02:22:00.000Z",0],["2021-05-23T02:23:00.000Z",0],["2021-05-23T02:24:00.000Z",0],["2021-05-23T02:25:00.000Z",0],["2021-05-23T02:26:00.000Z",0],["2021-05-23T02:27:00.000Z",0],["2021-05-23T02:28:00.000Z",0],["2021-05-23T02:29:00.000Z",0],["2021-05-23T02:30:00.000Z",0],["2021-05-23T02:31:00.000Z",0],["2021-05-23T02:32:00.000Z",0],["2021-05-23T02:33:00.000Z",0],["2021-05-23T02:34:00.000Z",0],["2021-05-23T02:35:00.000Z",0],["2021-05-23T02:36:00.000Z",0],["2021-05-23T02:37:00.000Z",0],["2021-05-23T02:38:00.000Z",0],["2021-05-23T02:39:00.000Z",0],["2021-05-23T02:40:00.000Z",0],["2021-05-23T02:41:00.000Z",0],["2021-05-23T02:42:00.000Z",0],["2021-05-23T02:43:00.000Z",0],["2021-05-23T02:44:00.000Z",0],["2021-05-23T02:45:00.000Z",24],["2021-05-23T02:46:00.000Z",0],["2021-05-23T02:47:00.000Z",0],["2021-05-23T02:48:00.000Z",0],["2021-05-23T02:49:00.000Z",0],["2021-05-23T02:50:00.000Z",8]], {});
      </script>

      <h1>One Point</h1>
      <div id="one-point" class="chart"></div>
      <script>
        new Chartkick.LineChart("one-point", [{"name":"boom","data":[["2021-04-24","21.0"]],"library":null},{"name":"bam","data":[["2021-04-24","75.0"]],"library":null},{"name":"hello","data":[["2021-04-24","4.0"]]}], {"min":null});
      </script>

      <h1>All Zeros</h1>
      <div id="all-zeros" class="chart"></div>
      <script>
        new Chartkick.LineChart("all-zeros", [{"name":"Revisions","data":{"2021-04-03":0,"2021-04-10":0,"2021-04-17":0,"2021-04-24":0,"2021-05-01":0,"2021-05-08":0,"2021-05-15":0,"2021-05-22":0,"2021-05-29":0}}], {});
      </script>

      <h1>Overlapping Labels - Chart.js</h1>
      <div id="overlapping-labels" class="chart"></div>
      <script>
        new Chartkick.LineChart("overlapping-labels", [{"name":"new_ratings","data":[["1997-09-15",1740],["1997-09-22",4237],["1997-09-29",3461],["1997-10-06",2365],["1997-10-13",2104],["1997-10-20",2368],["1997-10-27",1190],["1997-11-03",3382],["1997-11-10",9095],["1997-11-17",7113],["1997-11-24",4258],["1997-12-01",2418],["1997-12-08",2444],["1997-12-15",3352],["1997-12-22",2171],["1997-12-29",3554],["1998-01-05",4204],["1998-01-12",2600],["1998-01-19",2420],["1998-01-26",3410],["1998-02-02",2039],["1998-02-09",1341],["1998-02-16",3712],["1998-02-23",3397],["1998-03-02",2347],["1998-03-09",1816],["1998-03-16",609],["1998-03-23",4081],["1998-03-30",8191],["1998-04-06",1684],["1998-04-13",2157],["1998-04-20",740]],"library":null}], {"min":null});
      </script>

      <h1>Bad Label - Chart.js</h1>
      <div id="bad-label" class="chart"></div>
      <script>
        new Chartkick.LineChart("bad-label", [{"name":"Workout","data":{"2021-02-10":3,"2021-02-17":3,"2021-02-24":3,"2021-03-03":1,"2021-03-10":4,"2021-03-17":3,"2021-03-24":2,"2021-03-31":3}},{"name":"Go to concert","data":{"2021-03-31":0}}]);
      </script>

      <h1>NaN Bug - Chart.js</h1>
      <div id="nan" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("nan", [{"name":"None","data":{"none":501}},{"name":"Shoes","data":[["None",1],["Flats & Loafers",1]]},{"name":"Bottoms","data":[["Skirts",1]]},{"name":"Jewelry","data":[["None",1]]},{"name":"Accessories","data":[["Belts",1]]},{"name":"Bags","data":[["None",1]]},{"name":"Dresses","data":[["None",116],["Midi",6],["Maxi",4]]},{"name":"Tops","data":[["None",6],["Shirts",6],["Sweaters & Cardigans",1]]}], {"stacked":true});
      </script>

      <h1>10 Minutes</h1>
      <div id="ten-minutes" class="chart"></div>
      <script>
        new Chartkick.LineChart("ten-minutes", [["2021-09-10T19:50:00.000Z",45],["2021-09-10T20:00:00.000Z",50],["2021-09-10T20:10:00.000Z",48],["2021-09-10T20:20:00.000Z",46],["2021-09-10T20:30:00.000Z",45],["2021-09-10T20:40:00.000Z",45],["2021-09-10T20:50:00.000Z",44],["2021-09-10T21:00:00.000Z",56],["2021-09-10T21:10:00.000Z",50],["2021-09-10T21:20:00.000Z",51],["2021-09-10T21:30:00.000Z",51],["2021-09-10T21:40:00.000Z",44],["2021-09-10T21:50:00.000Z",45],["2021-09-10T22:00:00.000Z",47],["2021-09-10T22:10:00.000Z",45],["2021-09-10T22:20:00.000Z",44],["2021-09-10T22:30:00.000Z",41],["2021-09-10T22:40:00.000Z",42],["2021-09-10T22:50:00.000Z",41],["2021-09-10T23:00:00.000Z",43],["2021-09-10T23:10:00.000Z",38],["2021-09-10T23:20:00.000Z",38],["2021-09-10T23:30:00.000Z",37],["2021-09-10T23:40:00.000Z",37],["2021-09-10T23:50:00.000Z",36],["2021-09-11T00:00:00.000Z",39],["2021-09-11T00:10:00.000Z",33],["2021-09-11T00:20:00.000Z",32],["2021-09-11T00:30:00.000Z",33],["2021-09-11T00:40:00.000Z",37],["2021-09-11T00:50:00.000Z",33],["2021-09-11T01:00:00.000Z",31],["2021-09-11T01:10:00.000Z",28],["2021-09-11T01:20:00.000Z",27],["2021-09-11T01:30:00.000Z",28],["2021-09-11T01:40:00.000Z",31],["2021-09-11T01:50:00.000Z",26],["2021-09-11T02:00:00.000Z",27],["2021-09-11T02:10:00.000Z",23],["2021-09-11T02:20:00.000Z",21],["2021-09-11T02:30:00.000Z",20],["2021-09-11T02:40:00.000Z",19],["2021-09-11T02:50:00.000Z",19],["2021-09-11T03:00:00.000Z",21],["2021-09-11T03:10:00.000Z",17],["2021-09-11T03:20:00.000Z",17],["2021-09-11T03:30:00.000Z",16],["2021-09-11T03:40:00.000Z",15],["2021-09-11T03:50:00.000Z",15],["2021-09-11T04:00:00.000Z",18],["2021-09-11T04:10:00.000Z",14],["2021-09-11T04:20:00.000Z",13],["2021-09-11T04:30:00.000Z",12],["2021-09-11T04:40:00.000Z",11],["2021-09-11T04:50:00.000Z",11],["2021-09-11T05:00:00.000Z",15],["2021-09-11T05:10:00.000Z",13],["2021-09-11T05:20:00.000Z",9],["2021-09-11T05:30:00.000Z",10],["2021-09-11T05:40:00.000Z",9],["2021-09-11T05:50:00.000Z",9],["2021-09-11T06:00:00.000Z",15],["2021-09-11T06:10:00.000Z",13],["2021-09-11T06:20:00.000Z",12],["2021-09-11T06:30:00.000Z",12],["2021-09-11T06:40:00.000Z",8],["2021-09-11T06:50:00.000Z",7],["2021-09-11T07:00:00.000Z",12],["2021-09-11T07:10:00.000Z",8],["2021-09-11T07:20:00.000Z",8],["2021-09-11T07:30:00.000Z",7],["2021-09-11T07:40:00.000Z",6],["2021-09-11T07:50:00.000Z",7],["2021-09-11T08:00:00.000Z",8],["2021-09-11T08:10:00.000Z",10],["2021-09-11T08:20:00.000Z",9],["2021-09-11T08:30:00.000Z",9],["2021-09-11T08:40:00.000Z",7],["2021-09-11T08:50:00.000Z",8],["2021-09-11T09:00:00.000Z",13],["2021-09-11T09:10:00.000Z",11],["2021-09-11T09:20:00.000Z",10],["2021-09-11T09:30:00.000Z",6],["2021-09-11T09:40:00.000Z",9],["2021-09-11T09:50:00.000Z",5],["2021-09-11T10:00:00.000Z",8],["2021-09-11T10:10:00.000Z",6],["2021-09-11T10:20:00.000Z",6],["2021-09-11T10:30:00.000Z",6],["2021-09-11T10:40:00.000Z",7],["2021-09-11T10:50:00.000Z",7],["2021-09-11T11:00:00.000Z",10],["2021-09-11T11:10:00.000Z",8],["2021-09-11T11:20:00.000Z",9],["2021-09-11T11:30:00.000Z",10],["2021-09-11T11:40:00.000Z",11],["2021-09-11T11:50:00.000Z",11],["2021-09-11T12:00:00.000Z",18],["2021-09-11T12:10:00.000Z",14],["2021-09-11T12:20:00.000Z",15],["2021-09-11T12:30:00.000Z",17],["2021-09-11T12:40:00.000Z",17],["2021-09-11T12:50:00.000Z",19],["2021-09-11T13:00:00.000Z",31],["2021-09-11T13:10:00.000Z",25],["2021-09-11T13:20:00.000Z",25],["2021-09-11T13:30:00.000Z",27],["2021-09-11T13:40:00.000Z",27],["2021-09-11T13:50:00.000Z",29],["2021-09-11T14:00:00.000Z",37],["2021-09-11T14:10:00.000Z",33],["2021-09-11T14:20:00.000Z",33],["2021-09-11T14:30:00.000Z",37],["2021-09-11T14:40:00.000Z",39],["2021-09-11T14:50:00.000Z",41],["2021-09-11T15:00:00.000Z",52],["2021-09-11T15:10:00.000Z",46],["2021-09-11T15:20:00.000Z",46],["2021-09-11T15:30:00.000Z",53],["2021-09-11T15:40:00.000Z",49],["2021-09-11T15:50:00.000Z",51],["2021-09-11T16:00:00.000Z",63],["2021-09-11T16:10:00.000Z",54],["2021-09-11T16:20:00.000Z",55],["2021-09-11T16:30:00.000Z",58],["2021-09-11T16:40:00.000Z",60],["2021-09-11T16:50:00.000Z",59],["2021-09-11T17:00:00.000Z",68],["2021-09-11T17:10:00.000Z",63],["2021-09-11T17:20:00.000Z",63],["2021-09-11T17:30:00.000Z",65],["2021-09-11T17:40:00.000Z",65],["2021-09-11T17:50:00.000Z",64],["2021-09-11T18:00:00.000Z",71],["2021-09-11T18:10:00.000Z",68],["2021-09-11T18:20:00.000Z",67],["2021-09-11T18:30:00.000Z",68],["2021-09-11T18:40:00.000Z",69],["2021-09-11T18:50:00.000Z",67],["2021-09-11T19:00:00.000Z",76],["2021-09-11T19:10:00.000Z",72],["2021-09-11T19:20:00.000Z",70],["2021-09-11T19:30:00.000Z",71]], {});
      </script>

      <h1>30 Minutes</h1>
      <div id="thirty-minutes" class="chart"></div>
      <script>
        new Chartkick.LineChart("thirty-minutes", [["2021-09-04T20:00:00.000Z",44],["2021-09-04T20:30:00.000Z",43],["2021-09-04T21:00:00.000Z",42],["2021-09-04T21:30:00.000Z",40],["2021-09-04T22:00:00.000Z",39],["2021-09-04T22:30:00.000Z",36],["2021-09-04T23:00:00.000Z",37],["2021-09-04T23:30:00.000Z",34],["2021-09-05T00:00:00.000Z",32],["2021-09-05T00:30:00.000Z",29],["2021-09-05T01:00:00.000Z",27],["2021-09-05T01:30:00.000Z",23],["2021-09-05T02:00:00.000Z",21],["2021-09-05T02:30:00.000Z",19],["2021-09-05T03:00:00.000Z",18],["2021-09-05T03:30:00.000Z",16],["2021-09-05T04:00:00.000Z",14],["2021-09-05T04:30:00.000Z",11],["2021-09-05T05:00:00.000Z",10],["2021-09-05T05:30:00.000Z",8],["2021-09-05T06:00:00.000Z",9],["2021-09-05T06:30:00.000Z",7],["2021-09-05T07:00:00.000Z",8],["2021-09-05T07:30:00.000Z",6],["2021-09-05T08:00:00.000Z",9],["2021-09-05T08:30:00.000Z",8],["2021-09-05T09:00:00.000Z",6],["2021-09-05T09:30:00.000Z",6],["2021-09-05T10:00:00.000Z",11],["2021-09-05T10:30:00.000Z",6],["2021-09-05T11:00:00.000Z",8],["2021-09-05T11:30:00.000Z",12],["2021-09-05T12:00:00.000Z",14],["2021-09-05T12:30:00.000Z",16],["2021-09-05T13:00:00.000Z",21],["2021-09-05T13:30:00.000Z",23],["2021-09-05T14:00:00.000Z",29],["2021-09-05T14:30:00.000Z",35],["2021-09-05T15:00:00.000Z",43],["2021-09-05T15:30:00.000Z",48],["2021-09-05T16:00:00.000Z",53],["2021-09-05T16:30:00.000Z",50],["2021-09-05T17:00:00.000Z",53],["2021-09-05T17:30:00.000Z",55],["2021-09-05T18:00:00.000Z",56],["2021-09-05T18:30:00.000Z",55],["2021-09-05T19:00:00.000Z",60],["2021-09-05T19:30:00.000Z",61],["2021-09-05T20:00:00.000Z",63],["2021-09-05T20:30:00.000Z",62],["2021-09-05T21:00:00.000Z",58],["2021-09-05T21:30:00.000Z",60],["2021-09-05T22:00:00.000Z",59],["2021-09-05T22:30:00.000Z",53],["2021-09-05T23:00:00.000Z",49],["2021-09-05T23:30:00.000Z",47],["2021-09-06T00:00:00.000Z",42],["2021-09-06T00:30:00.000Z",37],["2021-09-06T01:00:00.000Z",35],["2021-09-06T01:30:00.000Z",32],["2021-09-06T02:00:00.000Z",28],["2021-09-06T02:30:00.000Z",23],["2021-09-06T03:00:00.000Z",21],["2021-09-06T03:30:00.000Z",19],["2021-09-06T04:00:00.000Z",17],["2021-09-06T04:30:00.000Z",13],["2021-09-06T05:00:00.000Z",11],["2021-09-06T05:30:00.000Z",9],["2021-09-06T06:00:00.000Z",9],["2021-09-06T06:30:00.000Z",7],["2021-09-06T07:00:00.000Z",8],["2021-09-06T07:30:00.000Z",5],["2021-09-06T08:00:00.000Z",7],["2021-09-06T08:30:00.000Z",6],["2021-09-06T09:00:00.000Z",6],["2021-09-06T09:30:00.000Z",5],["2021-09-06T10:00:00.000Z",6],["2021-09-06T10:30:00.000Z",6],["2021-09-06T11:00:00.000Z",9],["2021-09-06T11:30:00.000Z",10],["2021-09-06T12:00:00.000Z",14],["2021-09-06T12:30:00.000Z",17],["2021-09-06T13:00:00.000Z",23],["2021-09-06T13:30:00.000Z",27],["2021-09-06T14:00:00.000Z",32],["2021-09-06T14:30:00.000Z",40],["2021-09-06T15:00:00.000Z",47],["2021-09-06T15:30:00.000Z",49],["2021-09-06T16:00:00.000Z",55],["2021-09-06T16:30:00.000Z",59],["2021-09-06T17:00:00.000Z",61],["2021-09-06T17:30:00.000Z",61],["2021-09-06T18:00:00.000Z",63],["2021-09-06T18:30:00.000Z",63],["2021-09-06T19:00:00.000Z",62],["2021-09-06T19:30:00.000Z",59],["2021-09-06T20:00:00.000Z",62],["2021-09-06T20:30:00.000Z",66],["2021-09-06T21:00:00.000Z",60],["2021-09-06T21:30:00.000Z",55],["2021-09-06T22:00:00.000Z",56],["2021-09-06T22:30:00.000Z",55],["2021-09-06T23:00:00.000Z",53],["2021-09-06T23:30:00.000Z",51],["2021-09-07T00:00:00.000Z",45],["2021-09-07T00:30:00.000Z",43],["2021-09-07T01:00:00.000Z",38],["2021-09-07T01:30:00.000Z",33],["2021-09-07T02:00:00.000Z",30],["2021-09-07T02:30:00.000Z",25],["2021-09-07T03:00:00.000Z",23],["2021-09-07T03:30:00.000Z",20],["2021-09-07T04:00:00.000Z",16],["2021-09-07T04:30:00.000Z",13],["2021-09-07T05:00:00.000Z",11],["2021-09-07T05:30:00.000Z",9],["2021-09-07T06:00:00.000Z",9],["2021-09-07T06:30:00.000Z",7],["2021-09-07T07:00:00.000Z",9],["2021-09-07T07:30:00.000Z",7],["2021-09-07T08:00:00.000Z",9],["2021-09-07T08:30:00.000Z",7],["2021-09-07T09:00:00.000Z",6],["2021-09-07T09:30:00.000Z",5],["2021-09-07T10:00:00.000Z",7],["2021-09-07T10:30:00.000Z",7],["2021-09-07T11:00:00.000Z",9],["2021-09-07T11:30:00.000Z",10],["2021-09-07T12:00:00.000Z",14],["2021-09-07T12:30:00.000Z",15],["2021-09-07T13:00:00.000Z",21],["2021-09-07T13:30:00.000Z",22],["2021-09-07T14:00:00.000Z",25],["2021-09-07T14:30:00.000Z",28],["2021-09-07T15:00:00.000Z",31],["2021-09-07T15:30:00.000Z",37],["2021-09-07T16:00:00.000Z",39],["2021-09-07T16:30:00.000Z",38],["2021-09-07T17:00:00.000Z",40],["2021-09-07T17:30:00.000Z",40],["2021-09-07T18:00:00.000Z",48],["2021-09-07T18:30:00.000Z",49],["2021-09-07T19:00:00.000Z",50],["2021-09-07T19:30:00.000Z",45],["2021-09-07T20:00:00.000Z",49],["2021-09-07T20:30:00.000Z",47],["2021-09-07T21:00:00.000Z",48],["2021-09-07T21:30:00.000Z",47],["2021-09-07T22:00:00.000Z",46],["2021-09-07T22:30:00.000Z",44],["2021-09-07T23:00:00.000Z",46],["2021-09-07T23:30:00.000Z",42],["2021-09-08T00:00:00.000Z",38],["2021-09-08T00:30:00.000Z",35],["2021-09-08T01:00:00.000Z",30],["2021-09-08T01:30:00.000Z",26],["2021-09-08T02:00:00.000Z",25],["2021-09-08T02:30:00.000Z",22],["2021-09-08T03:00:00.000Z",20],["2021-09-08T03:30:00.000Z",17],["2021-09-08T04:00:00.000Z",15],["2021-09-08T04:30:00.000Z",12],["2021-09-08T05:00:00.000Z",11],["2021-09-08T05:30:00.000Z",9],["2021-09-08T06:00:00.000Z",10],["2021-09-08T06:30:00.000Z",8],["2021-09-08T07:00:00.000Z",9],["2021-09-08T07:30:00.000Z",6],["2021-09-08T08:00:00.000Z",9],["2021-09-08T08:30:00.000Z",7],["2021-09-08T09:00:00.000Z",7],["2021-09-08T09:30:00.000Z",6],["2021-09-08T10:00:00.000Z",7],["2021-09-08T10:30:00.000Z",7],["2021-09-08T11:00:00.000Z",8],["2021-09-08T11:30:00.000Z",9],["2021-09-08T12:00:00.000Z",13],["2021-09-08T12:30:00.000Z",14],["2021-09-08T13:00:00.000Z",21],["2021-09-08T13:30:00.000Z",23],["2021-09-08T14:00:00.000Z",27],["2021-09-08T14:30:00.000Z",28],["2021-09-08T15:00:00.000Z",32],["2021-09-08T15:30:00.000Z",34],["2021-09-08T16:00:00.000Z",40],["2021-09-08T16:30:00.000Z",41],["2021-09-08T17:00:00.000Z",42],["2021-09-08T17:30:00.000Z",41],["2021-09-08T18:00:00.000Z",40],["2021-09-08T18:30:00.000Z",38],["2021-09-08T19:00:00.000Z",39],["2021-09-08T19:30:00.000Z",40],["2021-09-08T20:00:00.000Z",40],["2021-09-08T20:30:00.000Z",45],["2021-09-08T21:00:00.000Z",50],["2021-09-08T21:30:00.000Z",42],["2021-09-08T22:00:00.000Z",40],["2021-09-08T22:30:00.000Z",37],["2021-09-08T23:00:00.000Z",36],["2021-09-08T23:30:00.000Z",35],["2021-09-09T00:00:00.000Z",44],["2021-09-09T00:30:00.000Z",37],["2021-09-09T01:00:00.000Z",32],["2021-09-09T01:30:00.000Z",28],["2021-09-09T02:00:00.000Z",25],["2021-09-09T02:30:00.000Z",23],["2021-09-09T03:00:00.000Z",19],["2021-09-09T03:30:00.000Z",17],["2021-09-09T04:00:00.000Z",16],["2021-09-09T04:30:00.000Z",14],["2021-09-09T05:00:00.000Z",11],["2021-09-09T05:30:00.000Z",10],["2021-09-09T06:00:00.000Z",10],["2021-09-09T06:30:00.000Z",8],["2021-09-09T07:00:00.000Z",11],["2021-09-09T07:30:00.000Z",7],["2021-09-09T08:00:00.000Z",9],["2021-09-09T08:30:00.000Z",7],["2021-09-09T09:00:00.000Z",7],["2021-09-09T09:30:00.000Z",6],["2021-09-09T10:00:00.000Z",9],["2021-09-09T10:30:00.000Z",7],["2021-09-09T11:00:00.000Z",9],["2021-09-09T11:30:00.000Z",10],["2021-09-09T12:00:00.000Z",14],["2021-09-09T12:30:00.000Z",16],["2021-09-09T13:00:00.000Z",21],["2021-09-09T13:30:00.000Z",22],["2021-09-09T14:00:00.000Z",27],["2021-09-09T14:30:00.000Z",31],["2021-09-09T15:00:00.000Z",36],["2021-09-09T15:30:00.000Z",35],["2021-09-09T16:00:00.000Z",40],["2021-09-09T16:30:00.000Z",40],["2021-09-09T17:00:00.000Z",42],["2021-09-09T17:30:00.000Z",41],["2021-09-09T18:00:00.000Z",43],["2021-09-09T18:30:00.000Z",42],["2021-09-09T19:00:00.000Z",43],["2021-09-09T19:30:00.000Z",41],["2021-09-09T20:00:00.000Z",42],["2021-09-09T20:30:00.000Z",41],["2021-09-09T21:00:00.000Z",46],["2021-09-09T21:30:00.000Z",43],["2021-09-09T22:00:00.000Z",46],["2021-09-09T22:30:00.000Z",42],["2021-09-09T23:00:00.000Z",40],["2021-09-09T23:30:00.000Z",38],["2021-09-10T00:00:00.000Z",35],["2021-09-10T00:30:00.000Z",30],["2021-09-10T01:00:00.000Z",28],["2021-09-10T01:30:00.000Z",24],["2021-09-10T02:00:00.000Z",21],["2021-09-10T02:30:00.000Z",18],["2021-09-10T03:00:00.000Z",17],["2021-09-10T03:30:00.000Z",14],["2021-09-10T04:00:00.000Z",13],["2021-09-10T04:30:00.000Z",11],["2021-09-10T05:00:00.000Z",11],["2021-09-10T05:30:00.000Z",8],["2021-09-10T06:00:00.000Z",9],["2021-09-10T06:30:00.000Z",7],["2021-09-10T07:00:00.000Z",13],["2021-09-10T07:30:00.000Z",9],["2021-09-10T08:00:00.000Z",13],["2021-09-10T08:30:00.000Z",7],["2021-09-10T09:00:00.000Z",7],["2021-09-10T09:30:00.000Z",6],["2021-09-10T10:00:00.000Z",7],["2021-09-10T10:30:00.000Z",6],["2021-09-10T11:00:00.000Z",8],["2021-09-10T11:30:00.000Z",9],["2021-09-10T12:00:00.000Z",15],["2021-09-10T12:30:00.000Z",16],["2021-09-10T13:00:00.000Z",20],["2021-09-10T13:30:00.000Z",21],["2021-09-10T14:00:00.000Z",28],["2021-09-10T14:30:00.000Z",30],["2021-09-10T15:00:00.000Z",38],["2021-09-10T15:30:00.000Z",38],["2021-09-10T16:00:00.000Z",42],["2021-09-10T16:30:00.000Z",47],["2021-09-10T17:00:00.000Z",46],["2021-09-10T17:30:00.000Z",48],["2021-09-10T18:00:00.000Z",48],["2021-09-10T18:30:00.000Z",48],["2021-09-10T19:00:00.000Z",49],["2021-09-10T19:30:00.000Z",46],["2021-09-10T20:00:00.000Z",48],["2021-09-10T20:30:00.000Z",45],["2021-09-10T21:00:00.000Z",52],["2021-09-10T21:30:00.000Z",47],["2021-09-10T22:00:00.000Z",45],["2021-09-10T22:30:00.000Z",41],["2021-09-10T23:00:00.000Z",40],["2021-09-10T23:30:00.000Z",37],["2021-09-11T00:00:00.000Z",35],["2021-09-11T00:30:00.000Z",34],["2021-09-11T01:00:00.000Z",29],["2021-09-11T01:30:00.000Z",28],["2021-09-11T02:00:00.000Z",24],["2021-09-11T02:30:00.000Z",19],["2021-09-11T03:00:00.000Z",18],["2021-09-11T03:30:00.000Z",16],["2021-09-11T04:00:00.000Z",15],["2021-09-11T04:30:00.000Z",11],["2021-09-11T05:00:00.000Z",13],["2021-09-11T05:30:00.000Z",9],["2021-09-11T06:00:00.000Z",13],["2021-09-11T06:30:00.000Z",9],["2021-09-11T07:00:00.000Z",9],["2021-09-11T07:30:00.000Z",7],["2021-09-11T08:00:00.000Z",9],["2021-09-11T08:30:00.000Z",8],["2021-09-11T09:00:00.000Z",12],["2021-09-11T09:30:00.000Z",7],["2021-09-11T10:00:00.000Z",7],["2021-09-11T10:30:00.000Z",7],["2021-09-11T11:00:00.000Z",9],["2021-09-11T11:30:00.000Z",11],["2021-09-11T12:00:00.000Z",16],["2021-09-11T12:30:00.000Z",18],["2021-09-11T13:00:00.000Z",27],["2021-09-11T13:30:00.000Z",28],["2021-09-11T14:00:00.000Z",34],["2021-09-11T14:30:00.000Z",39],["2021-09-11T15:00:00.000Z",48],["2021-09-11T15:30:00.000Z",51],["2021-09-11T16:00:00.000Z",57],["2021-09-11T16:30:00.000Z",59],["2021-09-11T17:00:00.000Z",64],["2021-09-11T17:30:00.000Z",64],["2021-09-11T18:00:00.000Z",69],["2021-09-11T18:30:00.000Z",68],["2021-09-11T19:00:00.000Z",73],["2021-09-11T19:30:00.000Z",71]], {});
      </script>

     <h1>Line Chart - Curve</h1>
      <div id="curve" class="chart"></div>
      <script>
        new Chartkick.LineChart("curve", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}, {curve: false});
      </script>

      <h1>Line Chart - Legend</h1>
      <div id="legend" class="chart"></div>
      <script>
        new Chartkick.LineChart("legend", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}, {legend: true});
      </script>

      <h1>Line Chart - Legend Bottom</h1>
      <div id="legend-bottom" class="chart"></div>
      <script>
        new Chartkick.LineChart("legend-bottom", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}, {legend: "bottom", label: "Boom"});
      </script>

      <h1>Line Chart - Title</h1>
      <div id="title" class="chart"></div>
      <script>
        new Chartkick.LineChart("title", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}, {title: "Boom", download: true});
      </script>

      <h1>Points</h1>
      <div id="points" class="chart"></div>
      <script>
        new Chartkick.LineChart("points", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}, {points: false});
      </script>

      <h1>Line Chart - Prefix</h1>
      <div id="prefix" class="chart"></div>
      <script>
        new Chartkick.LineChart("prefix", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}, {prefix: "$"});
      </script>

      <h1>Pie Chart - Prefix</h1>
      <div id="pie-prefix" class="chart"></div>
      <script>
        new Chartkick.PieChart("pie-prefix", [["Blueberry",44],["Strawberry",23],["Banana",22],["Apple",21],["Grape",13]], {prefix: "$"});
      </script>

      <h1>Column Chart - Prefix</h1>
      <div id="column-prefix" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("column-prefix", [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]], {prefix: "$"});
      </script>

      <h1>Bar Chart - Prefix</h1>
      <div id="bar-prefix" class="chart"></div>
      <script>
        new Chartkick.BarChart("bar-prefix", [["0",32],["1",46],["2",28],["3",21],["4",20],["5",13],["6",27]], {prefix: "$"});
      </script>

      <h1>Line Chart - Negative Prefix</h1>
      <div id="negative-prefix" class="chart"></div>
      <script>
        new Chartkick.LineChart("negative-prefix", {"2021-02-10":-11,"2021-02-11":-6,"2021-02-12":-3,"2021-02-13":-2,"2021-02-14":-5,"2021-02-15":-3,"2021-02-16":-8,"2021-02-17":-6,"2021-02-18":-6,"2021-02-19":-12,"2021-02-20":-5,"2021-02-21":-5,"2021-02-22":-3,"2021-02-23":-1,"2021-02-24":-10,"2021-02-25":-1,"2021-02-26":-3,"2021-02-27":-2,"2021-02-28":-3,"2021-03-01":-2,"2021-03-02":-8}, {prefix: "$"});
      </script>

      <h1>Scatter - Prefix</h1>
      <div id="scatter-prefix" class="chart"></div>
      <script>
        new Chartkick.ScatterChart("scatter-prefix", [[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9]], {prefix: "$"});
      </script>

      <h1>Bubble - Prefix</h1>
      <div id="bubble-prefix" class="chart"></div>
      <script>
        new Chartkick.BubbleChart("bubble-prefix", [[174.0, 80.0, 1], [176.5, 82.3, 2], [180.3, 73.6, 3], [167.6, 74.1, 6], [188.0, 85.9, 2]], {prefix: "$"});
      </script>

      <h1>Multiple Series Line - Prefix</h1>
      <div id="multiple-line-prefix" class="chart"></div>
      <script>
        new Chartkick.LineChart("multiple-line-prefix", [{"name":"Workout","data":{"2021-02-10":3,"2021-02-17":3,"2021-02-24":3,"2021-03-03":1,"2021-03-10":4,"2021-03-17":3,"2021-03-24":2,"2021-03-31":3}},{"name":"Go to concert","data":{"2021-02-10":0,"2021-02-17":0,"2021-02-24":0,"2021-03-03":0,"2021-03-10":2,"2021-03-17":1,"2021-03-24":0,"2021-03-31":0}},{"name":"Wash face","data":{"2021-02-10":0,"2021-02-17":1,"2021-02-24":0,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":0,"2021-03-31":1}},{"name":"Call parents","data":{"2021-02-10":5,"2021-02-17":3,"2021-02-24":2,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":1,"2021-03-31":0}},{"name":"Eat breakfast","data":{"2021-02-10":3,"2021-02-17":2,"2021-02-24":1,"2021-03-03":0,"2021-03-10":2,"2021-03-17":2,"2021-03-24":3,"2021-03-31":0}}], {prefix: "$"});
      </script>

      <h1>Line Chart - Suffix</h1>
      <div id="suffix" class="chart"></div>
      <script>
        new Chartkick.LineChart("suffix", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}, {suffix: "%"});
      </script>

      <h1>Thousands</h1>
      <div id="thousands" class="chart"></div>
      <script>
        new Chartkick.LineChart("thousands", {"2021-02-10":11000,"2021-02-11":60000,"2021-02-12":30000,"2021-02-13":20000,"2021-02-14":50000,"2021-02-15":30000,"2021-02-16":80000,"2021-02-17":60000,"2021-02-18":60000,"2021-02-19":120000,"2021-02-20":50000,"2021-02-21":50000,"2021-02-22":30000,"2021-02-23":10000,"2021-02-24":100000,"2021-02-25":10000,"2021-02-26":30000,"2021-02-27":20000,"2021-02-28":30000,"2021-03-01":20000,"2021-03-02":80000}, {thousands: ","});
      </script>

      <h1>Thousands - Negative Prefix</h1>
      <div id="thousands-negative-prefix" class="chart"></div>
      <script>
        new Chartkick.LineChart("thousands-negative-prefix", {"2021-02-10":-11000,"2021-02-11":-60000,"2021-02-12":-30000,"2021-02-13":-20000,"2021-02-14":-50000,"2021-02-15":-30000,"2021-02-16":-80000,"2021-02-17":-60000,"2021-02-18":-60000,"2021-02-19":-120000,"2021-02-20":-50000,"2021-02-21":-50000,"2021-02-22":-30000,"2021-02-23":-10000,"2021-02-24":-100000,"2021-02-25":-10000,"2021-02-26":-30000,"2021-02-27":-20000,"2021-02-28":-30000,"2021-03-01":-20000,"2021-03-02":-80000}, {thousands: ",", prefix: "$"});
      </script>

      <h1>Scatter - Thousands</h1>
      <div id="scatter-thousands" class="chart"></div>
      <script>
        new Chartkick.ScatterChart("scatter-thousands", [[1174.0, 1080.0], [1176.5, 1082.3], [1180.3, 1073.6], [1167.6, 1074.1], [1188.0, 1085.9]], {thousands: ","});
      </script>

      <h1>Scatter - No Thousands</h1>
      <div id="scatter-no-thousands" class="chart"></div>
      <script>
        new Chartkick.ScatterChart("scatter-no-thousands", [[1174.0, 1080.0], [1176.5, 1082.3], [1180.3, 1073.6], [1167.6, 1074.1], [1188.0, 1085.9]]);
      </script>

      <h1>Bubble - Thousands</h1>
      <div id="bubble-thousands" class="chart"></div>
      <script>
        new Chartkick.BubbleChart("bubble-thousands", [[1174.0, 1080.0, 1100], [1176.5, 1082.3, 1200], [1180.3, 1073.6, 1300], [1167.6, 1074.1, 1600], [1188.0, 1085.9, 1150]], {thousands: ","});
      </script>

      <h1>Bubble - No Thousands</h1>
      <div id="bubble-no-thousands" class="chart"></div>
      <script>
        new Chartkick.BubbleChart("bubble-no-thousands", [[1174.0, 1080.0, 1100], [1176.5, 1082.3, 1200], [1180.3, 1073.6, 1300], [1167.6, 1074.1, 1600], [1188.0, 1085.9, 1150]]);
      </script>

      <h1>Decimal</h1>
      <div id="decimal" class="chart"></div>
      <script>
        new Chartkick.LineChart("decimal", {"2021-02-10":0.11,"2021-02-11":0.6,"2021-02-12":0.3,"2021-02-13":0.2,"2021-02-14":0.5,"2021-02-15":0.3,"2021-02-16":0.8,"2021-02-17":0.6,"2021-02-18":0.6,"2021-02-19":0.12,"2021-02-20":0.5,"2021-02-21":0.5,"2021-02-22":0.3,"2021-02-23":0.1,"2021-02-24":0.10,"2021-02-25":0.1,"2021-02-26":0.3,"2021-02-27":0.2,"2021-02-28":0.3,"2021-03-01":0.2,"2021-03-02":0.8}, {decimal: ","});
      </script>

      <h1>Scatter Same X</h1>
      <div id="scatter-same-x" class="chart"></div>
      <script>
        new Chartkick.ScatterChart("scatter-same-x", [[0, -5], [-10, -10], [5, 10], [-5, 5], [10, -5], [-10, 10], [-5, 10]]);
      </script>

      <h1>Numeric Axis Line</h1>
      <div id="numeric-axis-line" class="chart"></div>
      <script>
        new Chartkick.LineChart("numeric-axis-line", [{"name":"PhD theses","data":[[1978,1],[1996,1],[1998,1],[1999,3],[2000,3],[2001,1],[2002,1],[2003,1],[2004,4],[2005,4],[2006,6],[2007,6],[2008,3],[2009,5],[2010,3],[2011,5],[2012,4],[2013,7],[2014,10]]},{"name":"Masters theses","data":[[1982,1],[1983,2],[1984,6],[1985,5],[1986,4],[1987,2],[1988,11],[1989,14],[1990,18],[1991,8],[1992,8],[1993,12],[1994,4],[1995,7],[1996,12],[1997,6],[1998,8],[1999,7],[2000,12],[2001,20],[2002,18],[2003,23],[2004,39],[2005,36],[2006,46],[2007,37],[2008,59],[2009,36],[2010,30],[2011,22],[2012,33],[2013,26],[2014,12]].map(v => [v[0], v[1] * 1000])}]);
      </script>

      <h1>Numeric Axis Line - Thousands</h1>
      <div id="numeric-axis-line-thousands" class="chart"></div>
      <script>
        new Chartkick.LineChart("numeric-axis-line-thousands", [{"name":"PhD theses","data":[[1978,1],[1996,1],[1998,1],[1999,3],[2000,3],[2001,1],[2002,1],[2003,1],[2004,4],[2005,4],[2006,6],[2007,6],[2008,3],[2009,5],[2010,3],[2011,5],[2012,4],[2013,7],[2014,10]]},{"name":"Masters theses","data":[[1982,1],[1983,2],[1984,6],[1985,5],[1986,4],[1987,2],[1988,11],[1989,14],[1990,18],[1991,8],[1992,8],[1993,12],[1994,4],[1995,7],[1996,12],[1997,6],[1998,8],[1999,7],[2000,12],[2001,20],[2002,18],[2003,23],[2004,39],[2005,36],[2006,46],[2007,37],[2008,59],[2009,36],[2010,30],[2011,22],[2012,33],[2013,26],[2014,12]].map(v => [v[0], v[1] * 1000])}], {thousands: ","});
      </script>

      <h1>Numeric Axis Area</h1>
      <div id="numeric-axis-area" class="chart"></div>
      <script>
        new Chartkick.AreaChart("numeric-axis-area", [{name: "Series A", data: [[8,32],[20,46],[2,28],[3,21],[4,20],[5,13],[6,27]]}, {name: "Series B", data: [[7,22],[1,36],[2,38],[3,31],[4,30],[5,3],[6,17]]}]);
      </script>

      <h1>Numeric Axis Column</h1>
      <div id="numeric-axis-column" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("numeric-axis-column", [{"name":"PhD theses","data":[[1978,1],[1996,1],[1998,1],[1999,3],[2000,3],[2001,1],[2002,1],[2003,1],[2004,4],[2005,4],[2006,6],[2007,6],[2008,3],[2009,5],[2010,3],[2011,5],[2012,4],[2013,7],[2014,10]]},{"name":"Masters theses","data":[[1982,1],[1983,2],[1984,6],[1985,5],[1986,4],[1987,2],[1988,11],[1989,14],[1990,18],[1991,8],[1992,8],[1993,12],[1994,4],[1995,7],[1996,12],[1997,6],[1998,8],[1999,7],[2000,12],[2001,20],[2002,18],[2003,23],[2004,39],[2005,36],[2006,46],[2007,37],[2008,59],[2009,36],[2010,30],[2011,22],[2012,33],[2013,26],[2014,12]]}]);
      </script>

      <h1>Numeric Axis Bar</h1>
      <div id="numeric-axis-bar" class="chart"></div>
      <script>
        new Chartkick.BarChart("numeric-axis-bar", [{"name":"PhD theses","data":[[1978,1],[1996,1],[1998,1],[1999,3],[2000,3],[2001,1],[2002,1],[2003,1],[2004,4],[2005,4],[2006,6],[2007,6],[2008,3],[2009,5],[2010,3],[2011,5],[2012,4],[2013,7],[2014,10]]},{"name":"Masters theses","data":[[1982,1],[1983,2],[1984,6],[1985,5],[1986,4],[1987,2],[1988,11],[1989,14],[1990,18],[1991,8],[1992,8],[1993,12],[1994,4],[1995,7],[1996,12],[1997,6],[1998,8],[1999,7],[2000,12],[2001,20],[2002,18],[2003,23],[2004,39],[2005,36],[2006,46],[2007,37],[2008,59],[2009,36],[2010,30],[2011,22],[2012,33],[2013,26],[2014,12]]}]);
      </script>

      <h1>Boolean Axis Column</h1>
      <div id="boolean-axis-column" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("boolean-axis-column", [[true, 9], [false, 1], [null, 2]]);
      </script>

      <h1>Bytes - Line Chart</h1>
      <div id="bytes-line" class="chart"></div>
      <script>
        new Chartkick.LineChart("bytes-line", [["2021-02-10",1073217535],["2021-02-11",1073217536],["2021-02-12",812017254.4],["2021-02-13",677799526.4],["2021-02-14",1147561574.4],["2021-02-15",1281779302.4],["2021-02-16",476472934.4],["2021-02-17",879126118.4],["2021-02-18",610690662.4],["2021-02-19",1415997030.4],["2021-02-20",1080452710.4],["2021-02-21",409364070.4],["2021-02-22",1013343846.4],["2021-02-23",1348888166.4],["2021-02-24",744908390.4]], {bytes: true});
      </script>

      <h1>Bytes - Pie Chart</h1>
      <div id="bytes-pie" class="chart"></div>
      <script>
        new Chartkick.PieChart("bytes-pie", [["A",262144],["B",524288],["C",786432],["D",1048576],["E",1310720]], {bytes: true});
      </script>

      <h1>Bytes - Column Chart</h1>
      <div id="bytes-column" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("bytes-column", [["A",536870912],["B",1073741824],["C",1610612736],["D",2147483648],["E",2684354560]], {bytes: true});
      </script>

      <h1>Bytes - Bar Chart</h1>
      <div id="bytes-bar" class="chart"></div>
      <script>
        new Chartkick.BarChart("bytes-bar", [["A",2147483648],["B",4294967296],["C",6442450944],["D",8589934592],["E",10737418240]], {bytes: true});
      </script>

      <h1>Bytes - Negative</h1>
      <div id="bytes-negative" class="chart"></div>
      <script>
        new Chartkick.LineChart("bytes-negative", [["2021-02-10",-1073217535],["2021-02-11",-1073217536],["2021-02-12",-812017254.4],["2021-02-13",-677799526.4],["2021-02-14",-1147561574.4],["2021-02-15",-1281779302.4],["2021-02-16",-476472934.4],["2021-02-17",879126118.4],["2021-02-18",610690662.4],["2021-02-19",-1415997030.4],["2021-02-20",-1080452710.4],["2021-02-21",409364070.4],["2021-02-22",1013343846.4],["2021-02-23",1348888166.4],["2021-02-24",744908390.4]], {bytes: true});
      </script>

      <h1>Precision - Large</h1>
      <div id="precision-large" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("precision-large", [["A",12354],["B",1235.4],["C",123.54]], {precision: 3});
      </script>

      <h1>Precision - Small</h1>
      <div id="precision-small" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("precision-small", [["A",1.2345],["B",0.12345],["C",0.012345]], {precision: 3});
      </script>

      <h1>Round - Positive</h1>
      <div id="round-positive" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("round-positive", [["A",2.147483648],["B",4.294967296],["C",6.442450944],["D",8.589934592],["E",1.0737418240]], {round: 2});
      </script>

      <h1>Round - Negative</h1>
      <div id="round-negative" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("round-negative", [["A",21474.83648],["B",42949.67296],["C",64424.50944],["D",85899.34592],["E",10737.418240]], {round: -3});
      </script>

      <h1>Round and Precision</h1>
      <div id="round-precision" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("round-precision", [["A",1.2345],["B",0.12345],["C",0.012345]], {round: 2, precision: 3});
      </script>

      <h1>Zeros - Precision</h1>
      <div id="zeros-precision" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("zeros-precision", [["A",12],["B",12.3],["C",12.34],["D",12.345],["E",12.3456]], {precision: 4, zeros: true});
      </script>

      <h1>Zeros - Round</h1>
      <div id="zeros-round" class="chart"></div>
      <script>
        new Chartkick.ColumnChart("zeros-round", [["A",12],["B",12.3],["C",12.34],["D",12.345],["E",12.3456]], {round: 4, zeros: true});
      </script>

      <h1>Null Data</h1>
      <div id="null-data" class="chart"></div>
      <script>
        new Chartkick.LineChart("null-data", null);
      </script>

      <h1>Empty Message</h1>
      <div id="empty-message" class="chart"></div>
      <script>
        new Chartkick.LineChart("empty-message", {}, {empty: "No data!!"});
      </script>

      <h1>Empty Pie</h1>
      <div id="empty-pie" class="chart"></div>
      <script>
        new Chartkick.PieChart("empty-pie", {}, {empty: "No data!!"});
      </script>

      <h1>Custom Chart</h1>
      <div id="custom" class="chart"></div>
      <script>
        new Chartkick.CustomChart("custom", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8}, {download: true});
      </script>

      <h1>Redraw Chart</h1>
      <div id="redraw" class="chart"></div>
      <script>
        new Chartkick.LineChart("redraw", [{"name":"Visits","type":"area","data":{"March 20, 2021":9,"March 21, 2021":11,"March 22, 2021":9,"March 23, 2021":8,"March 24, 2021":12,"March 25, 2021":10,"March 26, 2021":9}},{"name":"Views","type":"spline","data":{"March 20, 2021":17,"March 21, 2021":9,"March 22, 2021":14,"March 23, 2021":11,"March 24, 2021":14,"March 25, 2021":20,"March 26, 2021":9}}]);

        Chartkick.charts["redraw"].redraw();
        Chartkick.charts["redraw"].redraw();
        Chartkick.charts["redraw"].redraw();
      </script>

      <h1>Update Data</h1>
      <div id="update-data" class="chart"></div>
      <script>
        var updateChart = new Chartkick.LineChart("update-data", {"2021-02-10":11,"2021-02-11":6,"2021-02-12":3,"2021-02-13":2,"2021-02-14":5,"2021-02-15":3,"2021-02-16":8,"2021-02-17":6,"2021-02-18":6,"2021-02-19":12,"2021-02-20":5,"2021-02-21":5,"2021-02-22":3,"2021-02-23":1,"2021-02-24":10,"2021-02-25":1,"2021-02-26":3,"2021-02-27":2,"2021-02-28":3,"2021-03-01":2,"2021-03-02":8});

        setTimeout(function () {
          updateChart.updateData([{"name":"Workout","data":{"2021-02-10":3,"2021-02-17":3,"2021-02-24":3,"2021-03-03":1,"2021-03-10":4,"2021-03-17":3,"2021-03-24":2,"2021-03-31":3}},{"name":"Go to concert","data":{"2021-02-10":0,"2021-02-17":0,"2021-02-24":0,"2021-03-03":0,"2021-03-10":2,"2021-03-17":1,"2021-03-24":0,"2021-03-31":0}},{"name":"Wash face","data":{"2021-02-10":0,"2021-02-17":1,"2021-02-24":0,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":0,"2021-03-31":1}},{"name":"Call parents","data":{"2021-02-10":5,"2021-02-17":3,"2021-02-24":2,"2021-03-03":0,"2021-03-10":0,"2021-03-17":1,"2021-03-24":1,"2021-03-31":0}},{"name":"Eat breakfast","data":{"2021-02-10":3,"2021-02-17":2,"2021-02-24":1,"2021-03-03":0,"2021-03-10":2,"2021-03-17":2,"2021-03-24":3,"2021-03-31":0}}], {max: 30});

          // console.log(chart1.getData());

          setTimeout(function () {
            // chart1.updateData("remote.json");
            updateChart.setOptions({colors: ["#b00", "#666"]});
          }, 3000);
        }, 3000);
      </script>

      <h1>Refresh Data URL</h1>
      <div id="refresh-data-url" class="chart"></div>
      <script>
        var refreshChart = new Chartkick.LineChart("refresh-data-url", "remote.json", {refresh: 3});

        setTimeout(function () {
          refreshChart.stopRefresh();
        }, 10000);
      </script>

      <h1>Refresh Data Callback</h1>
      <div id="refresh-data-callback" class="chart"></div>
      <script>
        var data = [];
        var cb = function (success, error) {
          data.push([data.length + 1, Math.random()]);
          success(data);
        };
        var refreshChart2 = new Chartkick.LineChart("refresh-data-callback", cb, {refresh: 3});

        setTimeout(function () {
          refreshChart2.stopRefresh();
        }, 30000);
      </script>

      <h1>Refresh Data Error</h1>
      <div id="refresh-data-error" class="chart"></div>
      <script>
        new Chartkick.LineChart("refresh-data-error", [], {refresh: 3});
      </script>

      <script>
        var chart = Chartkick.charts["remote"];
        // console.log(chart);
        // console.log(chart.getElement());
        // console.log(chart.getDataSource());
        // console.log(chart.getData());
        // console.log(chart.getOptions());
        // console.log(chart.getChartObject());
        Chartkick.eachChart(function (chart) {
          // console.log(chart.getElement());
        });
      </script>

    </div>
  </body>
</html>
